<template>
  <div>
    <div
      v-if="datetime.length"
      ref="lineEchartsBox"
      v-loading="loading"
      style="width: 100%; height: 400px"
    />
    <el-empty v-else :description="$t('暂无数据')" />
  </div>
</template>

<script>
import websiteApi from '@/api/website'
import * as echarts from 'echarts'
export default {
  props: ['type', 'siteId'],
  data() {
    return {
      loading: false,
      subtitle: this.$t('其他'),
      val: {},
      date: [], // 日期
      value1: [], // 数量
      value2: [],
      datetime: [], // 时间
      timetype: '1',
      site_id: '',
      name: '', // 折线中文名
      name1: '', // 日期时间名
      name2: '',
      interval: '', // X轴间隔
      ipData: [],
      uvData: [],
      pvData: []
    }
  },
  watch: {
    type: {
      handler(Ndata, Odata) {
        this.timetype = Ndata
        this.$nextTick(() => {
          this.getQxtData()
        })
      }
    },
    siteId: {
      handler(val, value) {
        this.site_id = val
        this.$nextTick(() => {
          this.getQxtData()
        })
      },
      immediate: true
    }
  },

  methods: {
    // 获取趋势数据
    getQxtData() {
      const val = {
        type: this.type,
        website_id: this.site_id
      }
      this.loading = true
      websiteApi.indexQST(val).then(res => {
        this.ipData = res.data.ip_list
        this.pvData = res.data.pv_list
        this.uvData = res.data.uv_list
        this.datetime = res.data.time
        this.$nextTick(() => {
          this.init()
        })
        this.loading = false
      })
    },

    init() {
      var option = {
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {}
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true
            }
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '20',
          containLabel: true,
          x: 50,
          y: 0,
          // （控制表距离上线左右的距离）
          borderWidth: 100
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: '#333' // 坐标轴数值样式
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#333' // 坐标轴的样式
              }
            },

            data: this.datetime,
            boundaryGap: false // 坐标轴两端空白
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              // y轴上的y轴线条相关设置
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            axisLine: {
              // Y轴样式
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              show: true,
              // Y轴 刻度样式
              textStyle: {
                color: '#000'
              }
            }
          }
        ],
        series: [
          {
            name: 'IP',
            type: 'line',
            smooth: true, // 设置折线 true为曲线
            // symbol: 'circle', // 拐点形状
            // symbolSize: 8, // 圆心的大小
            itemStyle: {
              // 拐点样式
              color: '#3B88FF'
            },
            lineStyle: {
              // 折线样式
              // width: 0,
              color: '#3B88FF'
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(59,136,255,0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)'
                }
              ])
            },
            showSymbol: false, // 显示拐点
            emphasis: {
              focus: 'series'
            },
            data: this.ipData
          },
          {
            name: 'UV',
            type: 'line',
            smooth: true, // 设置折线 true为曲线
            // symbol: 'circle', // 拐点形状
            // symbolSize: 8, // 圆心的大小
            itemStyle: {
              // 拐点样式
              color: '#FF7D00'
            },
            lineStyle: {
              color: '#FF7D00'
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255,125,0,0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.09)'
                }
              ])
            },
            showSymbol: false, // 显示拐点
            data: this.uvData,
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: 'PV',
            type: 'line',
            smooth: true, // 设置折线 true为曲线
            // symbol: 'circle', // 拐点形状
            // symbolSize: 8, // 圆心的大小
            itemStyle: {
              // 拐点样式
              color: '#F8BB4D'
            },
            lineStyle: {
              color: '#F8BB4D'
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(248,187,77,0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.09)'
                }
              ])
            },
            showSymbol: false, // 显示拐点
            data: this.pvData,
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.lineEchartsBox)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.elmenu.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  padding: 0 12px;
}
.elmenu.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
.elmenu .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
  background-color: #4aa6fc;
  color: #fff;
}

.el-submenu__icon-arrow.el-icon-arrow-down {
  color: #fff;
}
.elmenu.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  margin-left: 20px;
}
</style>
<style scoped>
.el-menu.el-menu--horizontal {
  width: 265px;
  border-bottom: none;
  height: 28px;
  margin-left: 20px;
}
.el-menu.el-menu--horizontal.elmenu {
  display: flex;
  border: solid 1px #eee;
}
.el-menu--horizontal > .el-menu-item {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  border-right: solid 1px #eee;
  border-bottom: solid 1px #eee;
  padding: 0 12px;
  display: inline;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  background-color: #4aa6fc;
  color: #fff;
}
.el-menu--horizontal > .el-submenu {
  /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
  line-height: 26px;
  flex-grow: 0;
  width: 93px;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
.el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
</style>
